import React, { useRef } from 'react'
import { Tabs, theme } from 'antd'
import CarMan from './carMan/index'
import FlimMan from './flimMan/index'

const App = () => {
  const CarManRef = useRef(null)
  const FlimManRef = useRef(null)

  let tablsList = [
    {
      tableTitle: '品牌车型管理',
      view: <CarMan ref={CarManRef} />
    },
    {
      tableTitle: '膜品管理',
      view: <FlimMan ref={FlimManRef} />
    }
  ]
  const items = tablsList.map((item, i) => {
    return {
      label: item.tableTitle,
      key: i,
      children: item.view,
      style:
        i === 0
          ? {
              height: 200
            }
          : undefined
    }
  })
  const changeFn = (data) => {
    if (data == 0) {
      setTimeout(() => {
        CarManRef.current.handleChildMethod()
      })
    } else {
      setTimeout(() => {
        FlimManRef.current.handleChildMethod()
      })
    }
  }
  const {
    token: { colorBgContainer }
  } = theme.useToken()
  const renderTabBar = (props, DefaultTabBar) => (
    <DefaultTabBar
      {...props}
      style={{
        background: colorBgContainer
      }}
    />
  )
  return (
    <Tabs
      defaultActiveKey="1"
      onChange={changeFn}
      renderTabBar={renderTabBar}
      items={items}
    />
  )
}
export default App
